<template>
    <div class="description">
        <div v-if="title" class="title">{{ title }}</div>
        <el-row class="description-row" :gutter="gutter">
            <el-col :key="key" :span="+col" v-for="(item, key) in dataList">
                <div class="col-box">
                    <span class="term">{{ item.label }}</span>
                    <div class="detail">
                        <span v-if="!item.slot">{{ formData[item.key] }}</span>
                        <slot v-else :name="item.slot" v-bind="item" @click="() => item.click && item.click()"></slot>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "Description",
    props: {
        title: String,
        dataList: [Object, Array],
        formData: {
            type: Object,
            value: () => { }
        },
        gutter: {
            type: [Number, String],
            default: 20
        },
        col: {
            type: [Number, String],
            default: 8
        }
    },

    data() {
        return {

        };
    },
    methods: {
        slotClick() {

        }
    },
    watch: {

    }
}
</script>

<style lang="scss" scoped>
.description {
    .description-row {
        margin-left: 100px !important;
    }

    .title {
        font-weight: 700;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 40px;
        color: rgba(0, 0, 0, 0.85);
    }

    .col-box {
        display: flex;
        align-items: center;
        padding-bottom: 16px;

        .term {
            color: rgba(0, 0, 0, .85);
            // font-weight: 600;

            line-height: 22px;

            margin-right: 8px;
            white-space: nowrap;
            display: table-cell;

            &:after {
                content: ":";
                margin: 0 8px 0 2px;
                position: relative;
                top: -0.5px;
            }
        }

        .detail {

            line-height: 1.5;
            width: 100%;

            color: rgba(0, 0, 0, 0.65);
            display: flex;
            flex-wrap: wrap;

            :deep(.el-tag) {
                margin: 0px 5px 5px 5px !important;
            }
        }
    }

}
</style>
